/**
 * @file PageNotFound.jsx
 * @description 404 页面未找到组件。
 */
import React from 'react';
import { Link } from 'react-router-dom';
import { FaArrowLeft } from 'react-icons/fa'; // 导入图标

const PageNotFound = () => {
  return (
    <div className="container my-5 py-5 text-center"> {/* 增加了 my-5 py-5 */}
      <div className="row">
        <div className="col-md-12 py-5">
          <h1 className="display-1 fw-bold">404</h1> {/* 加粗 */}
          <h4 className="p-3 display-5">哦哦！页面未找到。</h4>
          <p className="lead text-muted mb-4"> {/* 添加 text-muted 和 mb-4 */}
            您要查找的页面不存在或已被移动。
          </p>
          <Link to="/" className="btn btn-outline-dark btn-lg mx-4"> {/* 增大按钮 */}
            <FaArrowLeft className="me-2" /> 返回首页
          </Link>
        </div>
      </div>
    </div>
  );
};

export default PageNotFound;